<template>
  <div>
    <div class="main_operation">
      <div class="operation_left">
        <a-button class="mr10" type="primary" @click="addBtn">添加</a-button>
      </div>
      <div class="operation_right">
        <a-input-search style="width:300px;" placeholder="请输入通讯协议名称" @search="onSearch" enterButton />
      </div>
    </div>
    <div class="main">
      <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id"
        >
        <template slot="is_OnLine" slot-scope="text, record">
          <a-switch checkedChildren="在线" unCheckedChildren="离线" :defaultChecked="record.is_OnLine ==='1' ? true : false"
            :key="record.id" @change="val=>isOnLine(val, record)" />
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
          <a-button size="small" type="danger" @click="delBtn(record)">删除</a-button>
        </template>
      </a-table>
      <div class="pageBox">
        <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page"
          :defaultCurrent="1" @change="pageChange" />
      </div>
    </div>
    <!-- 添加编辑 -->
    <a-modal :maskClosable="false" :destroyOnClose="true" :title="titleModel" :width="600" v-model="visible"
      :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-form>
        <a-form-item required label="通信协议名称:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 18 ,xs: 24 }">
          <a-input v-model="formItem.name" placeholder="请输入通信协议名称" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  export default {
    name: 'List',
    data() {
      return {
        /* 通用模块 */
        //列表
        tableLoad: false, //列表loading状态
        formList: { //列表信息
          page: 1
        },
        selectedRowKeys: [], //勾选的id
        /* 通用模块end */

        /* 添加编辑 */
        titleModel: '', //标题
        visible: false, //窗口显示隐藏
        confirmLoading: false, //按钮loading状态
        formItem: {
          name: '',
        },
        /* 添加编辑end */
      };
    },
    computed: {
      ...mapState({
        Fields: state => state.equipmentProtocol.Fields,
        dataLists: state => state.equipmentProtocol.dataLists,
        requestCode: state => state.equipmentProtocol.requestCode,
      }),
    },
    mounted() {
      this.changeData()
    },
    methods: {
      /* 通用模块 */
      /* 接口 */
      ...mapActions({
        getLists: 'equipmentProtocol/getLists', //列表
        dataAdd: 'equipmentProtocol/dataAdd', //添加
        dataEdit: 'equipmentProtocol/dataEdit', //编辑
        dataDel: 'equipmentProtocol/dataDel', //删除
        // protocolAll: 'equipmentProtocol/protocolAll',        // 设备未使用编号信息

      }),
      // 勾选
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys
      },
      // 重新获取列表数据
      changeData() {
        this.tableLoad = true
        setTimeout(() => {
          this.getLists(this.formList)
          this.tableLoad = false
        }, 800);
      },
      //搜索
      onSearch(val) {
        this.formList = { //列表信息
          name: val,
          page: 1
        }
        this.changeData()
      },
      // 页码
      pageChange(page) {
        this.formList.page = page;
        this.getLists(this.formList)
      },
      /* 通用模块end */

      /* 添加编辑 */
      // 添加
      addBtn() {
        this.titleModel = '添加设备编号'
        this.formItem = {
          name: '',
        }
        this.visible = true
      },
      // 编辑
      editBtn(item) {
        console.log(item);
        this.titleModel = '编辑设备编号'
        this.formItem.id = item.id
        this.formItem.name = item.name
        this.visible = true
      },
      // 窗口确定
      handleOk() {
        this.confirmLoading = true;
        if (this.titleModel == '添加设备编号') {
          this.formList.page = 1;
          this.dataAdd(this.formItem)
        } else {
          this.dataEdit(this.formItem)
        }
        setTimeout(() => {
          if (this.requestCode === 0) {
            this.visible = false;
            this.changeData()
          }
          this.confirmLoading = false;
        }, 1000);
      },
      // 窗口取消
      handleCancel() {
        this.visible = false
      },
      /* 添加编辑end */
      /* 删除 */
      delBtn(item) {
        let _this = this
        this.$confirm({
          title: `您确定要删除 ${item.name} 吗?`,
          content: `删除后将不可恢复,请仔细核对!`,
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.dataDel(item.id)
            _this.changeData()
          },
        });
      },
      // 状态开关
      isOnLine(val, item) {
        item.is_OnLine = val ? '1' : '0'
        let stateForm = {
          id: item.id,
          status: val ? 1 : 0
        }
        this.switchState(stateForm)
      }
    }
  };
</script>

<style></style>
